<!DOCTYPE html>

<head>

    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" /> -->
    <!-- <title id="title-meta">安捷能源</title> -->

    <!-- 本页面对应css -->
    <link rel="stylesheet" th:href="@{/css/showPage3.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/js/elementui/theme-chalk/index.css}"/>

    <!-- 引入公共css -->
    <div th:insert="main :: common_head"></div>

    <style>

        .el-upload__input {
            display: none !important;
        }

        .el-input__inner {
            margin-bottom: 0 !important;
        }

        .el-table th.gutter {
            display: table-cell !important;
        }

        .el-table colgroup.gutter {
            display: table-cell !important;
        }

        .el-table .warning-row {
            background: red;
        }

        .el-table .success-row {
            background: yellow;
        }
        /*取消content自带的最小宽高，防止出现内部滚动条*/
        #content{
            min-height: 0px!important;
            background-color: #0c1226;
            overflow-x: auto!important;
            min-width: 0px!important;
        }

        .el-tabs__header{
            margin: 0 20px 15px;
        }
        .el-tabs__item {
            color: white;
        }
        .el-tabs__item.is-active{
            color: #04dff9;
        }
        /*.el-tabs__item:hover {*/
        /*    color: #04dff9!important;*/
        /*    !*display: none;*!*/
        /*}*/
        /*修改el-table鼠标停留行的颜色*/
        .el-table__body tr:hover>td{
            background-color: #033d67 !important;
        }

        .el-tabs__nav-wrap::after{
            background-color: #0b467c;
            color: #0b467c;
        }
        .el-tabs__active-bar{
            background-color: #04dff9;
            color: #04dff9;
        }
        .app-word{
            color: white;
            margin: 5px 10px 5px 5px;
        }
        .app-word-tip{
            color: #c911e6;
            font-size: 10px;
            margin: 5px 5px 5px 5px;
        }
        .app-flex-div{
            display: flex;
            flex-direction: row;
        }
        .upload-demo{
            display: flex;
            margin: 0 5px;
        }
        /*修改模型说明输入框的宽度*/
        #modelInfoInput.el-input__inner{
            width: 200px!important;
        }
        .el-input__inner{
            background-color: #0b2744!important;
            color: white!important;
            font-size: 10px!important;
            width: 138px!important;
        }
        .el-date-editor.el-input{
            width:140px!important;
        }
        .el-input__icon{
            height: 60%!important;
        }
        .el-table thead{
            color: #046ab6!important;
        }
        .el-table tr{
            background-color: #0b2746;
            color: white;
        }
        .el-table th {
            background-color: #033d67!important;
        }
        /*去掉el-table最下面的横线*/
        .el-table::before{
            display: none;
        }
        .el-table__fixed::before{
            display: none;
        }
        .el-table__empty-text {
            color: white;
        }
        /*去掉el-table的滚动条*/
        .el-table__body-wrapper::-webkit-scrollbar {
            width: 0;
        }
        .el-table td,.building-top .el-table th.is-leaf {
            border-bottom:  1px solid #007ACC!important;
        }
        .el-table__body .el-table__row.hover-row td {
            background-color: #033d67 !important;
        }
        .el-input__suffix{
            height: 157%!important;
        }
        .el-tag{
            color: white!important;
            background-image: linear-gradient(to right,#00E0FF, #0063FF);
        }

        .sixLink{
            position: absolute;
            top: 5px;
            right: 5px;
            height: 20px;
        }
        .sixLink > a{
            padding-left: 3px;
            padding-right: 3px;
            font-size: 15px;
            text-decoration : none;
        }

        .app::-webkit-scrollbar{
            display: none!important;
        }
        .app{
            -ms-overflow-style: none;
            overflow: -moz-scrollbars-none;
        }

    </style>

</head>

<body>
    <div class="row-fluid">
        <div id="content" class="span10" style="width: 100%;">
            <div class="sixLink">
                <a href="/multipower/index" style="color: white;">首页</a>
                <a href="#" onclick="checkStatus()" style="color: white;">能耗态势</a>
                <a href="/multipower/showpage3" style="color: white;">建模演示</a>
                <a href="/multipower/showpage5" style="color: white;">模型对比</a>
                <a href="/multipower/showpage4" style="color: white;">工况对比</a>
            </div>
            <div class="app" id="app" v-cloak>
                <div>
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="训练数据生成" name="first">
                            <div class="body">
                                <div class="left-items">
                                    <div class="left-model-generator">
                                        <div class="generator-model-list-item">
                                            <!-- <div class="item-top-title">数据生成</div> -->
                                            <div class="new-strategy-control ">
                                                <div class="control-select">
                                                    <div class="app-flex-div">
                                                        <div class="app-word">起止时间</div>
                                                        <div class="app-flex-div">
                                                        <el-date-picker v-model="startTime" type="date"
                                                            placeholder="开始日期" size="mini" class="date-select" readonly>
                                                        </el-date-picker>
                                                        <el-date-picker v-model="endTime" type="date"
                                                            placeholder="截止日期" size="mini" class="date-select" readonly>
                                                        </el-date-picker>
                                                        </div>
                                                    </div>
                                                    <div class="app-flex-div">
                                                        <div class="app-word-tip">
                                                            只能上传excel/csv文件，且文件第一列必须为日期元素</div>
                                                    <div>
                                                        <el-upload class="upload-demo" ref="upload"
                                                            action="https://jsonplaceholder.typicode.com/posts/"
                                                            :on-change="fileChange" :limit=1
                                                            :on-remove="fileRemove" :file-list="fileList"
                                                            :auto-upload="false" :multiple="false">
                                                            <el-button slot="trigger" size="small"
                                                                type="primary" disabled>选取文件
                                                            </el-button>
                                                            <el-button style="margin-left: 10px;" size="small"
                                                                type="primary"
                                                                @click="trainDataPageGenDataUploadNew" disabled>生成数据
                                                            </el-button>
                                                            <el-button @click="download" type="primary"
                                                                       style="margin-left: 10px!important;"
                                                                size="small" class="model-genenrator-btn" disabled>下载模板
                                                            </el-button>
                                                        </el-upload>
                                                    </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="table-data">
<!--                                            此处表格的高度动态变化
                                                除了图标之外屏幕的总高度，包括content的padding,app的margin,.el-tabs__nav-scroll,.generator-model-list-item
                                                .model-generator-control,自身的margin
                                                20+10+20+40+70+52+40=252 280-->
                                            <el-table :data="tableData" style="border-radius: 9px;background: #103864;width: 90%"
                                                ref="table" :height="tableHeight" id="elTable">
                                                <template v-for="(item,index) in tableHeader">
                                                    <el-table-column :prop="item.column_name"
                                                        :label="item.column_comment" :key="index" width="200" v-if='index===0'>
                                                    </el-table-column>
                                                    <el-table-column :prop="item.column_name"
                                                        :label="item.column_comment" :key="index"
                                                        v-else>
                                                    </el-table-column>
                                                </template>
                                            </el-table>
                                        </div>
                                        <div class="generator-model-list-item model-generator-control">
                                            <div class="input-data-model">
                                                <div class="input-data-font">模型名 </div>
                                                <div>
                                                <el-input v-model="modelName" placeholder="模型名" size="small">
                                                </el-input>
                                                </div>
                                            </div>

                                            <div class="input-data-model">
                                                <div class="input-data-font">模型说明 </div>
                                                <div>
                                                <el-input v-model="modelInfo" placeholder="模型说明" size="small" id="modelInfoInput" style="width: 200px!important;">
                                                </el-input>
                                                </div>
                                            </div>
                                            <div>
                                                <el-button type="primary" size="small" @click="generatorModel"
                                                           disabled>
                                                    生成模型
                                                </el-button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="预测数据生成" name="second">
                            <div>
                                <div class="generator-model-list-item">
                                    <div class="model-select-control">
                                        <div class="app-word">选择模型：</div>
                                        <el-select v-model="source_mode" placeholder="源模型" size="small"
                                            id="energySourceModel" @change="modelSelectChange" disabled>
                                            <el-option v-for="item in source_modes" :key="item.modelVersion"
                                                :label="item.modelName" :value="item.modelVersion">
                                                <el-tooltip placement="right-end"
                                                            effect="light"
                                                            :content="item.modelInfo">
                                                    <el-button type="text" style="width:100%;color:black;text-align: left" >
                                                        {{item.modelName}}
                                                    </el-button>
                                                </el-tooltip>
                                            </el-option>
                                        </el-select>
                                        <div class="upload-file-style">
                                            <el-upload class="upload-demo" ref="upload"
                                                action="https://jsonplaceholder.typicode.com/posts/"
                                                :on-change="modelGenFileChange" :limit=1
                                                :on-remove="modelGenFileRemove" :file-list="modelGenFileList"
                                                :auto-upload="false" :multiple="false">
                                                <el-button slot="trigger" size="small" type="primary"
                                                           disabled>选取文件
                                                </el-button>
                                                <div slot="tip" class="app-word-tip">
                                                    只能上传excel/csv文件，且文件第一列必须为日期元素</div>
                                            </el-upload>
                                        </div>
                                    </div>
                                    <div class="new-strategy-control ">
                                        <div class="control-select1">
                                                <div class="app-word">起止时间</div>
                                            <el-date-picker v-model="generatorModelStartDate" type="date"
                                                placeholder="开始日期" size="small" class="date-select" readonly>
                                            </el-date-picker>
                                            <el-date-picker v-model="generatorModelEndDate" type="date"
                                                placeholder="截止日期" size="small" class="date-select" readonly>
                                            </el-date-picker>
                                            <el-button type="primary" size="small" class="model-genenrator-btn"
                                                @click="preDataPageGenDataUploadNew"
                                                       disabled>生成数据</el-button>
                                            <el-button style="margin-left: 10px;" size="small" type="primary"
                                                @click="predictDataNew" disabled>预测数据
                                            </el-button>

                                        <el-progress style="padding-top: 10px;margin-left: 20px; width: 800px;" v-show="process != undefined" :stroke-width="3" :percentage="process"></el-progress>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-data">
                                    <el-table :data="tableData1" style="border-radius: 9px;background: #103864;width: 90%"
                                        ref="table" height="5rem">
                                        <template v-for="(item,index) in tableHeader1">
                                            <el-table-column :prop="item.column_name"
                                                :label="item.column_comment" :key="index" width="200"
                                                v-if='index===0'>
                                            </el-table-column>
                                            <el-table-column :prop="item.column_name"
                                                :label="item.column_comment" :key="index"  v-else>
                                            </el-table-column>
                                        </template>
                                    </el-table>
                                </div>
                                <div style="display:flex;justify-content: center">
                                <el-tag class="tag-style" v-if="analyseValue != ''">{{modelName}}准确率:
                                    {{analyseValue}}</el-tag>
                                <el-tag class="tag-style" v-if="analyseValue1 != ''">{{selectModelName}}准确率:
                                    {{analyseValue1}}</el-tag>
                                </div>
                                <div id="energyGraph" class="energy-graph"></div>
                                <div class="select-model-control">
                                    <el-button type="primary" size="medium" class="model-genenrator-btn"
                                        @click="keepOld" :disabled="prePageBeforeSelectModeDisable">保持旧模型
                                    </el-button>
                                    <el-button type="danger" size="medium" class="model-genenrator-btn"
                                        @click="useNew" :disabled="prePageBeforeSelectModeDisable">使用新模型
                                    </el-button>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
    </div>
        </div>
    </div>


    <script th:src="@{/js/jquery-1.9.1.min.js}"></script>
    <script th:src="@{/js/echarts.min.js}"></script>
    <script th:src="@{/js/time.js}"></script>
    <script th:src="@{/layer/layer.js}"></script>
    <script th:src="@{/js/jquery.blockUI.js}"></script>
    <script th:src="@{/js/tools.js}"></script>
    <script th:inline="javascript" th:src="@{/js/vue.min.js}"></script>
    <script th:inline="javascript" th:src="@{/js/vue.js}"></script>
    <script th:src="@{/js/elementui/index.js}"></script>
    <script th:src="@{/js/showPage3_data.js}"></script>
<!--    <script th:src="@{/js/detect-element-resize.js}"></script>-->
<!--    <script th:src="@{/js/iframe-resize.js}"></script>-->

    <script>
        //rem做响应式布局
        (function () {
            var doc = document
            var win = window
            var docEl = doc.documentElement
            var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
            var recalc = function () {
                var clientWidth = docEl.clientWidth;
                var clientHeight = docEl.clientHeight;
                if (!clientWidth) return
                if (!clientHeight) return
                // // 如果小于1000则rem不变化，如果超过1000则等比例变化
                if (clientWidth <= 1000) {
                    clientWidth = 1000
                }
                if (clientHeight <= 800) {
                    clientHeight = 800
                }
                // 设置根元素font-size大小
                docEl.style.fontSize = 100 * (clientWidth / 1920)+ 'px'
            }
            // 屏幕大小改变，或者横竖屏切换时，触发函数
            win.addEventListener(resizeEvt, recalc, false)
            // 文档加载完成时，触发函数
            doc.addEventListener('DOMContentLoaded', recalc, false)
        })();

        //检查是否已经在首页采用策略，采用后才可以进入page2
        function checkStatus() {
            let flag = window.sessionStorage.getItem("btnStatus");
            if(flag=="true"){
                window.location = "/multipower/showpage2";
            }else {
                window.alert("请先到首页采用策略");
            }
        }

        let getNumParam = val => { return isNumber(val) ? val : "" }
        let BASE_URL = ""
        function reDraw(id, option) {
            let elem = document.getElementById(id)
            elem.removeAttribute("_echarts_instance_");
            let mychart = echarts.init(document.getElementById(id));
            mychart.setOption(option, true);
        }

        function drawEleChart(resultData, eleChart_) { //电量，冷热量折线图
            var eleChart = echarts.init(document.getElementById(eleChart_));
            eleChart.showLoading({
                text: '数据正在加载...',
            });
            // 这里直接是绘图操作
            if (eleChart != null && eleChart != "" && eleChart != undefined) {
                eleChart.dispose();
            }
            option1.series[0].data = resultData.modelList; // 下拉框值
            option1.series[1].data = resultData.historyList; // 真实值
            option1.series[2].data = resultData.selectedList;// 使用模型
            legend = {
                // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                orient: 'horizontal',
                // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                x: 'center',
                // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                y: '30',
                data: [vm.source_mode_name + '值', '实际值', resultData.selectedModel + "(使用中)"],
                textStyle: {
                    //标题颜色
                    color: "#FFFFFFFF"
                },
            };
            option1.legend = legend;
            option1.series[0].name = vm.source_mode_name + '值';
            option1.series[1].name = "实际值";
            option1.series[2].name = resultData.selectedModel + "(使用中)";
            option1.xAxis.data = resultData.dateList;
            option1.xAxis.axisLabel.interval = Math.ceil(resultData.dateList.length / 7) - 1;
            eleChart = echarts.init(document.getElementById(eleChart_));
            eleChart.setOption(option1);
            window.vm.analyseValue = resultData.analyseValues[0];
            window.vm.analyseValue1 = resultData.analyseValues[1];
        }

        var option1 = {

            title: {
                // text: '小时能量预测',
                // subtext: "明日能量",
                subtextStyle: {
                    color: "#FFFFFFFF",
                    fontSize: 20
                },
                x: '80',
                padding: [0, 0, 0, 50],
                textStyle: {
                    color: "#FFFFFFFF",
                    fontSize: '16',
                    fontWeight: '500'
                },
            },
            animation: false,
            // animationDuration:15000,

            legend: {
                // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                orient: 'horizontal',
                // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                x: 'center',
                // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                y: '30',
                data: ['当前模型值', '实际值', '所选模型值'],
                textStyle: {
                    //标题颜色
                    color: "#FFFFFFFF"
                },
            },

            //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
            grid: {
                top: '26%', // 等价于 y: '16%'
                left: '7%',
                right: '8%',
                bottom: '3%',
                containLabel: true
            },

            // 提示框
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        // 设置x轴颜色
                        color: '#04dff9'
                    }
                },
                // 设置X轴数据旋转倾斜
                axisLabel: {
                    rotate: 0, // 旋转角度
                    interval: 1 //设置X轴数据间隔几个显示一个，为0表示都显示
                },
                // boundaryGap值为false的时候，折线第一个点在y轴上
                boundaryGap: false,
                data: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00",
                    "06:00", "07:00", "08:00", "09:00", "10:00", "11:00",
                    "12:00", "13:00", "14:00", "15:00", "16:00", "17:00",
                    "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"
                ]
            },

            yAxis: {
                name: 'KWh',
                type: 'value',
                // min:0, // 设置y轴刻度的最小值
                // max:1800,  // 设置y轴刻度的最大值
                splitNumber: 9, // 设置y轴刻度间隔个数
                axisLine: {
                    lineStyle: {
                        // 设置y轴颜色
                        color: '#04dff9'
                    }
                },
            },
            series: [
                {
                    name: "实际值",
                    data: [1032, 952, 391, 1434, 1220, 1330, 1320,
                        815, 1900, 701, 1900, 2200, 1700,
                        1200, 920, 1300, 1400, 2100, 1700, 930,
                        890, 1910, 301, 510],
                    type: 'line',
                    // 设置小圆点消失
                    // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
                    symbol: 'none',
                    // 设置折线弧度，取值：0-1之间
                    smooth: 0.5,
                    itemStyle: {
                        normal: {
                            // 拐点上显示数值
                            label: {
                                show: true
                            },
                            borderColor: 'red', // 拐点边框颜色
                            lineStyle: {
                                width: 3, // 设置线宽
                                type: 'solid' //'dotted'虚线 'solid'实线
                            }
                        }
                    }
                },
                {
                    name: '当前模型值',
                    data: [890, 932, 401, 1934, 1490, 1230, 1390,
                        810, 940, 700, 1800, 1290, 1600,
                        1200, 900, 1700, 1400, 1500, 800, 950,
                        810, 1400, 401, 500],
                    type: 'line',
                    // 设置小圆点消失
                    // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
                    symbol: 'none',
                    // 设置折线弧度，取值：0-1之间
                    smooth: 0.5,
                    itemStyle: {
                        normal: {
                            // 拐点上显示数值
                            label: {
                                show: true
                            },
                            borderColor: 'yellow', // 拐点边框颜色
                            lineStyle: {
                                width: 3, // 设置线宽
                                type: 'solid' //'dotted'虚线 'solid'实线
                            }
                        }
                    }
                },
                {
                    name: '当前模型值',
                    data: [890, 932, 401, 1934, 1490, 1230, 1390,
                        810, 940, 700, 1800, 1290, 1600,
                        1200, 900, 1700, 1400, 1500, 800, 950,
                        810, 1400, 401, 500],
                    type: 'line',
                    // 设置小圆点消失
                    // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
                    symbol: 'none',
                    // 设置折线弧度，取值：0-1之间
                    smooth: 0.5,
                    itemStyle: {
                        normal: {
                            // 拐点上显示数值
                            label: {
                                show: true
                            },
                            borderColor: 'yellow', // 拐点边框颜色
                            lineStyle: {
                                width: 3, // 设置线宽
                                type: 'solid' //'dotted'虚线 'solid'实线
                            }
                        }
                    }
                },
            ],
            color: ['#04dff9', 'rgb(40,140,255)', 'rgb(231,186,8)']
        };
        window.addEventListener("resize", function () {
            var eleChart = echarts.init(document.getElementById('energyGraph')); //电量图
            eleChart.resize();
        });
    </script>
    <script>
        var vm = new Vue({
                el: '#app',
                data: {
                    activeName: "first",
                    startTime: "2020/06/10",
                    endTime: "2020/07/10",
                    value: "",
                    value1: '',
                    value2: '',
                    isShow: false,
                    graphId: "",
                    BASE_URL: "",
                    modelInfo: "20200601_20210531 室内温度",
                    dataSession: "",
                    dataSession1: "",
                    modelVersion: "",
                    source_modes: [],
                    fileList: [],
                    options: [],
                    tableHeader: {},
                    tableData: [],
                    tableHeader1: {},
                    tableData1: [],
                    analyseValue: "",
                    analyseValue1: "",
                    modelGenFileList: [],
                    source_mode_name: '',
                    preDisabled: true,
                    genDisabled: true,
                    prePageBeforeSelectModeDisable: true,

                    trainDataFlag: false,
                    preDataFlag: false,
                    predictFlag: false,

                    //起止日期
                    generatorModelStartDate: "2021/07/01",
                    generatorModelEndDate: "2021/09/30",
                    // 正在使用模型名
                    selectModelName:"YC1008_old",
                    //新创建的模型名（同步修改）
                    source_mode: "YC1008_new1",
                    // 新创建的模型名（同步修改）
                    modelName: "YC1008_new1",
                    deviceCode:"ajdlnt.point56",

                    process: undefined,

                    tableHeight:'',

                },
                created() {
                    this.getAllMode()
                    this.handleTableHeight()
                },
                mounted() {
                    window.addEventListener('resize', this.handleResize)
                    window.addEventListener('resize', this.handleTableHeight)
                },
                destroyed() {
                    window.removeEventListener('resize', this.handleResize)
                },
                methods: {
                    handleTableHeight(){
                        if(document.documentElement.clientHeight=='') return;
                        if(document.documentElement.clientHeight-280>=420){
                            this.tableHeight =  document.documentElement.clientHeight-280;
                        }else{
                            this.tableHeight = 420;
                        }
                    },
                    modelSelectChange() {
                        this.prePageBeforeSelectModeDisable = false
                    },
                    handleResize() {
                        this.$nextTick(
                            () => {
                                this.$refs.table.doLayout()
                            }
                        )
                    },
                    handleClick: async function () {
                        await this.getAllMode();
                        // this.source_mode = "";
                    },
                    getAllMode: function () {
                        that = this
                        $.ajax({
                            type: "POST",
                            url: "model/energy/getall",
                            dataType: "json",
                            data: {
                                "deviceCode": "yc467",
                            },
                            async: true,
                            success: function (data) {
                                if (data.status == 200) {
                                    // var srcData = data.data;
                                    // for (var i = 0; i < srcData.length; i++) {
                                    //     if (srcData[i].used) {
                                    //         srcData[i].modelName = srcData[i].modelName+"(使用中)"
                                    //     }
                                    // }
                                    that.source_modes = data.data;
                                    if (!that.trainDataFlag){
                                        that.trainDataPageGenDataUploadNew();
                                    }

                                } else {
                                    layer.alert(data.msg, {
                                        icon: 5,
                                        title: "提示"
                                    });
                                }
                            },
                            failure: function (data) {
                                layer.alert(data.msg, {
                                    icon: 5,
                                    title: "提示"
                                });
                            }
                        })
                    },
                    preDataPageGenDataUploadNew: function () {
                        let header = preData.columns;
                        let tableHeaerList = []
                        for (var i = 0; i < header.length; i++) {
                            let tableHeaer = {}
                            tableHeaer["column_name"] = i.toString()
                            tableHeaer["column_comment"] = header[i];
                            tableHeaerList.push(tableHeaer)
                        }
                        that.tableHeader1 = tableHeaerList
                        let datas = preData.data;
                        let tableData = []
                        for (var i = 0; i < datas.length; i++) {
                            let current_data = datas[i];
                            let tmp_data = {}
                            for (var idx = 0; idx < current_data.length; idx++) {
                                tmp_data[idx.toString()] = current_data[idx];
                            }
                            tableData.push(tmp_data)
                        }
                        that.tableData1 = tableData
                        that.handleResize();
                        that.dataSession1 = preData.dataSession
                        // that.preDisabled = false;
                        // that.genDisabled = false;
                        that.preDataFlag = true;
                        if(!that.predictFlag){
                            that.predictDataNew();
                        }
                    },
                    preDataPageGenDataUpload: function () {
                        that = this;
                        that.process = undefined
                        if (!this.filterDate(that.generatorModelStartDate, that.generatorModelEndDate)) {
                            return;
                        }
                        let startTime = new Date(that.generatorModelStartDate);
                        let endTime = new Date(that.generatorModelEndDate);
                        let source_modes = that.source_modes;
                        let source_mode_version = "";
                        for(let i = 0; i < source_modes.length; i++){
                            if(that.source_mode === source_modes[i].modelName){
                                source_mode_version = source_modes[i].modelVersion;
                            }
                        }
                        let formData = new FormData()
                        formData.append("command", JSON.stringify({
                            "startTime": startTime,
                            "endTime": endTime,
                            "deviceCode": "yc467"
                        }))
                        if (this.modelGenFileList.length > 0) {
                            formData.append("extraData", this.modelGenFileList[0])
                        }
                        $.ajax({
                            type: "POST",
                            url: "energey/demoDataprocess",
                            dataType: "json",
                            processData: false,
                            contentType: false,
                            data: formData,
                            async: true,
                            success: function (data) {
                                if (data.status == 200) {
                                    let header = data.data.columns;
                                    let tableHeaerList = []
                                    for (var i = 0; i < header.length; i++) {
                                        let tableHeaer = {}
                                        tableHeaer["column_name"] = i.toString()
                                        tableHeaer["column_comment"] = header[i];
                                        tableHeaerList.push(tableHeaer)
                                    }
                                    that.tableHeader1 = tableHeaerList
                                    let datas = data.data.data;
                                    let tableData = []
                                    for (var i = 0; i < datas.length; i++) {
                                        let current_data = datas[i];
                                        let tmp_data = {}
                                        for (var idx = 0; idx < current_data.length; idx++) {
                                            tmp_data[idx.toString()] = current_data[idx];
                                        }
                                        tableData.push(tmp_data)
                                    }
                                    that.tableData1 = tableData
                                    that.handleResize();
                                    that.dataSession1 = data.data.dataSession
                                    // that.preDisabled = false;
                                    // that.genDisabled = false;
                                    that.preDataFlag = true;
                                    if(!that.predictFlag){
                                        that.predictDataNew();
                                    }
                                } else {
                                    layer.alert(data.msg, {
                                        icon: 5,
                                        title: "提示"
                                    });
                                }
                            },
                            failure: function (data) {
                                layer.alert(data.msg, {
                                    icon: 5,
                                    title: "提示"
                                });
                            }
                        })

                    },
                    //new方法为从js文件中读写死的数据
                    trainDataPageGenDataUploadNew:function () {
                        let header = trainData.columns;
                        let tableHeaerList = [];
                        for (var i = 0; i < header.length; i++) {
                            let tableHeaer = {};
                            tableHeaer["column_name"] = i.toString();
                            tableHeaer["column_comment"] = header[i];
                            tableHeaerList.push(tableHeaer);
                        }
                        that.tableHeader = tableHeaerList;
                        let datas = trainData.data;
                        let tableData = [];
                        for (var i = 0; i < datas.length; i++) {
                            let current_data = datas[i];
                            let tmp_data = {};
                            for (var idx = 0; idx < current_data.length; idx++) {
                                tmp_data[idx.toString()] = current_data[idx];
                            }
                            tableData.push(tmp_data);
                        }
                        that.tableData = tableData;
                        that.handleResize();
                        that.dataSession = trainData.dataSession;
                        that.trainDataFlag = true;
                        if(!that.preDataFlag){
                            that.preDataPageGenDataUploadNew();
                        }
                    },
                    //用ajax从数据库中读
                    trainDataPageGenDataUpload: function () {
                        that = this;
                        if (!this.filterDate(that.startTime, that.endTime)) {
                            return;
                        }
                        let startTime = new Date(that.startTime);
                        let endTime = new Date(that.endTime);
                        let formData = new FormData()
                        formData.append("command", JSON.stringify({
                            "startTime": startTime,
                            "endTime": endTime,
                            "deviceCode": "yc467"
                        }))
                        if (this.fileList.length > 0) {
                            formData.append("extraData", this.fileList[0])
                        }
                        $.ajax({
                            type: "POST",
                            url: "energey/demoDataprocess",
                            dataType: "json",
                            processData: false,
                            contentType: false,
                            data: formData,
                            async: true,
                            success: function (data) {
                                if (data.status == 200) {
                                    let header = data.data.columns;
                                    let tableHeaerList = [];
                                    for (var i = 0; i < header.length; i++) {
                                        let tableHeaer = {};
                                        tableHeaer["column_name"] = i.toString();
                                        tableHeaer["column_comment"] = header[i];
                                        tableHeaerList.push(tableHeaer);
                                    }
                                    that.tableHeader = tableHeaerList;
                                    let datas = data.data.data;
                                    let tableData = [];
                                    for (var i = 0; i < datas.length; i++) {
                                        let current_data = datas[i];
                                        let tmp_data = {};
                                        for (var idx = 0; idx < current_data.length; idx++) {
                                            tmp_data[idx.toString()] = current_data[idx];
                                        }
                                        tableData.push(tmp_data);
                                    }
                                    that.tableData = tableData;
                                    that.handleResize();
                                    that.dataSession = data.data.dataSession;
                                    that.trainDataFlag = true;
                                    if(!that.preDataFlag){
                                        that.preDataPageGenDataUploadNew();
                                    }
                                } else {
                                    layer.alert(data.msg, {
                                        icon: 5,
                                        title: "提示"
                                    });
                                }
                            },
                            failure: function (data) {
                                layer.alert(data.msg, {
                                    icon: 5,
                                    title: "提示"
                                });
                            }
                        })

                    },
                    download: function () {
                        window.location.href = "file/download/data.zip"
                    },
                    fileRemove: function () {
                        console.log("remove...", this.fileList.length)
                        this.fileList.pop()
                    },
                    fileChange: function (file, fileList) {
                        this.fileList.pop()
                        console.log("文件变化。。。。")
                        if (file.name.indexOf(".xls") != -1 || file.name.indexOf(".xlsx") != -1 || file.name.indexOf(".csv") != -1) {
                            this.fileList.push(file.raw);
                        } else {
                            this.$message.error('只能上传.xls/.xlsx/.csv格式文件!');
                        }

                    },
                    modelGenFileRemove: function () {
                        console.log("remove.....gen.", this.modelGenFileList.length)
                        this.modelGenFileList.pop()
                    },
                    modelGenFileChange: function (file, fileList) {
                        this.modelGenFileList.pop()
                        if (file.name.indexOf(".xls") != -1 || file.name.indexOf(".xlsx") != -1 || file.name.indexOf(".csv") != -1) {
                            this.modelGenFileList.push(file.raw);
                        } else {
                            this.$message.error('只能上传.xls/.xlsx/.csv格式文件!');
                        }

                    },
                    generatorModel: async function () {
                        that = this
                        const loading = that.$loading({
                            lock: true,
                            text: '模型生成中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        $.ajax({
                            type: "POST",
                            url: "model/energy/create",
                            dataType: "json",
                            contentType: "application/json",
                            data: JSON.stringify({
                                "modelName": that.modelName,
                                "modelInfo": that.modelInfo,
                                "dataSession": that.dataSession,
                            }),
                            success: function (data) {
                                if (data.status == 200) {
                                    that.modelVersion = data.data.modelVersion
                                    that.$message({
                                        message: '模型' + that.modelName + '创建成功',
                                        type: 'success'
                                    })
                                    that.genDisabled = true
                                    that.source_mode = that.modelVersion;
                                    that.source_modes.push({
                                        modelName: that.modelName,
                                        used: false,
                                        modelVersion: that.modelVersion
                                    });
                                    loading.close();
                                    that.activeName = "second";
                                    that.prePageBeforeSelectModeDisable = false;
                                } else {
                                    loading.close();
                                    layer.alert(data.msg, {
                                        icon: 5,
                                        title: "提示"
                                    });
                                }
                            },
                            failure: function (data) {
                                loading.close();
                                layer.alert(data.msg, {
                                    icon: 5,
                                    title: "提示"
                                });
                            }
                        })
                    },
                    predictDataNew: function () {
                        that = this;
                        that.source_mode_name = $("#energySourceModel").val();
                        that.getPredictResultNew();
                    },
                    predictData: function () {
                        that = this;
                        that.source_mode_name = $("#energySourceModel").val();
                        // // that.$message("正在预测，请稍等...")
                        // that.preDisabled = true
                        // that.process = 0.0

                        // let count = 0;
                        //
                        // // 每3秒轮询一次
                        // interval = window.setInterval(function () {
                        //     that.getPredictResult(interval, count)
                        //     count += 1
                        // }, 5000)
                        that.getPredictResult();
                    },
                    getPredictResultNew:function () {
                        let res = chartData
                        that.predictFlag = true;
                        drawEleChart(res, "energyGraph")
                    },
                    getPredictResult: function (interval,count) {
                        that = this;
                        $.ajax({
                            type: "POST",
                            url: "showpage3/demoModelpredict",
                            // dataType: "json",
                            // contentType: "application/json",
                            async: true,
                            data: {
                                "startTime": that.generatorModelStartDate,
                                "endTime": that.generatorModelEndDate,
                                "selectModelName": that.selectModelName,
                                "modelName": that.modelName,
                                "deviceCode": that.deviceCode,
                            },
                            success: function (data) {
                                if (data.status == 200) {
                                    let res = data.data
                                    that.predictFlag = true;
                                    drawEleChart(res, "energyGraph")
                                }
                            }, failure: function (data) {
                                layer.alert(data.msg, {
                                    icon: 5,
                                    title: "提示"
                                });
                            }
                        })
                    },
                    keepOld: function () {
                        this.$message({
                            type: 'success',
                            message: '保持旧模型!'
                        });
                    },
                    useNew: function () {
                        let that = this
                        this.$confirm('使用新模型？, 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            $.ajax({
                                type: "POST",
                                url: "model/energy/select",
                                dataType: "json",
                                contentType: "application/json",
                                data: JSON.stringify({
                                    "deviceId": 1,
                                    "modelVersion": that.source_mode,
                                }),
                                async: true,
                                success: function (data) {
                                    if (data.status == 200) {
                                        this.$message({
                                            type: 'success',
                                            message: '设置成功！'
                                        });
                                    } else {
                                        layer.alert(data.msg, {
                                            icon: 5,
                                            title: "提示"
                                        });
                                    }
                                },
                                failure: function (data) {
                                    layer.alert(data.msg, {
                                        icon: 5,
                                        title: "提示"
                                    });
                                }
                            })
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消'
                            });
                        });
                    },
                    filterDate: function (start, end) {
                        if (start - end >= 0) {
                            layer.alert('结束日期应在开始日期之后!', {
                                icon: 5,
                                title: "错误"
                            });
                            return false;
                        }
                        return true;
                    }
                }
            }
        );
    </script>

</body>

</html>